<template>
  <!-- 头部导航 -->
  <el-header style="padding: 0;margin: 0">
    <el-affix :offset="0">
      <div id="headDiv">
        <div>
          <el-button type="warning" size="large" style="margin-left: 40px" @click="$router.push('app')" round>
            <el-icon>
              <House/>
            </el-icon>
            首页
          </el-button>
        </div>
        <div>
          <span style="color: #626262;margin-right: 20px">您好!</span>
          <el-button type="primary" size="large" @click="$router.push('goods')" round>全部商品</el-button>
          <el-button type="primary" size="large" @click="toShoppingCar()" round>购物车</el-button>
          <el-button size="large" type="primary" @click="toOrder()" round>个人订单</el-button>
          <el-button size="large" type="primary" @click="$router.push('user')" round>个人信息</el-button>
          <el-button size="large" type="primary" @click="$router.push('returnOrder')" round>
            退款订单管理
          </el-button>
          <el-button size="large" type="primary" @click="$router.push('userMoney')" round>预存款管理</el-button>
          <el-button size="large" type="danger" style="margin-right: 20px" @click="exitUser()" round>退出登录
          </el-button>
        </div>
      </div>
    </el-affix>
  </el-header>
  <!-- 头部导航end -->

  <!-- 商城logo -->
  <div style="width: 1800px;margin: 0 auto;height: 60px">
    <div style="font-size: 30px;margin: 20px 0">
      <a href="#" style="color:#545454;text-decoration: none;">LO<span style="color: #c4c4c4">V</span><span>O</span> |
        朗沃商城</a>
    </div>
  </div>
  <!-- 商城logo end -->


  <div>
    <!-- 预存款部分 -->
    <div>
      <!-- 展示部分 -->
      <div>
        <el-row>
          <el-col :span="18">
            <div>
              <br>
              <span style="color: #626262;margin-right: 20px">您当前预存款余额为:</span>
              <span style="color: #626262;margin-right: 20px;font-weight: bold">{{ this.user.userMoney }}</span>
              <br><br>
              <!-- 预存款充值 -->
              <span style="color: #626262;margin-right: 20px">请输入自定义充值金额: </span>
              <el-input type="number" min="1"  oninput="value=value.replace(/[^\d]/g,'')" v-model="saveMoney"
                        placeholder="请输入自定义充值金额" style="width: 182px"/>&nbsp;&nbsp;&nbsp;
              <el-button type="primary" @click="userSaveMoney()" plain>充值</el-button>
              <el-button @click="this.saveMoney=0" plain>重置</el-button>
              <br><br>
              <!-- 系统自定充值金额选择 -->
              <el-button type="success" @click="choseMoney(50)" plain>50RMB</el-button>
              <el-button type="success" @click="choseMoney(100)" plain>100RMB</el-button>
              <el-button type="success" @click="choseMoney(150)" plain>150RMB</el-button>
              <el-button type="success" @click="choseMoney(200)" plain>200RMB</el-button>
              <!-- 预存款充值end -->
            </div>
          </el-col>
          <!-- 查询部分 -->
          <el-col :span="6">
            <h3>查询明细</h3><br>
            <el-form :model="data" ref="data" class="demo-ruleForm" label-position="left"
                     label-width="90px">
              <el-form-item prop="startTime" label="起始日期">
                <el-date-picker v-model="data.startTime" type="datetime" value-format="YYYY-MM-DD hh:mm:ss"
                                placeholder="请选择起始日期"
                                style="width: 160px"/>
              </el-form-item>
              <el-form-item prop="endTime" label="结束日期">
                <el-date-picker v-model="data.endTime" type="datetime" value-format="YYYY-MM-DD hh:mm:ss"
                                placeholder="请选择结束日期"
                                style="width: 160px"/>
              </el-form-item>
              <el-form-item>
                <el-button @click="reset()">重置</el-button>
                <el-button @click="changeCurrentPage()" type="primary">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <!-- 查询部分end -->
        </el-row>
      </div>
      <!-- 展示部分end -->

      <!-- 查询预存款充值/消费/退款明细 -->
      <el-menu mode="horizontal" default-active="1">
        <el-menu-item index="1" @click="queryMoney(1)">充值明细</el-menu-item>
        <el-menu-item index="2" @click="queryMoney(2)">消费明细</el-menu-item>
        <el-menu-item index="3" @click="queryMoney(3)">退款明细</el-menu-item>
      </el-menu>
      <!-- 查询预存款充值/消费明细end -->
    </div>
    <!-- 预存款部分end -->

    <!-- 充值明细展示 -->
    <el-table :data="userSaveList" :hidden="!this.saveShowVisible">
      <el-table-column prop="saveMoney" label="充值金额" align="center"/>
      <el-table-column prop="saveTime" label="充值时间" align="center"/>
    </el-table>
    <!-- 充值明细展示end -->

    <!-- 消费明细展示 -->
    <el-table :data="userBuyList" :hidden="!this.buyShowVisible">
      <el-table-column prop="buyMoney" label="消费金额" align="center"/>
      <el-table-column prop="buyTime" label="消费时间" align="center"/>
    </el-table>
    <!-- 消费明细展示end -->

    <!-- 退款明细展示 -->
    <el-table :data="userReturnList" :hidden="!this.returnShowVisible">
      <el-table-column prop="returnMoney" label="退款金额" align="center"/>
      <el-table-column prop="returnTime" label="退款时间" align="center"/>
    </el-table>
    <!-- 退款明细展示end -->

    <br><br>

    <!-- 分页部分 -->
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                   v-model:total="total" background @current-change="changeCurrentPage"/>
  </div>
</template>
<script>
import {ElMessage} from "element-plus"
import axios from "axios";

export default {
  name: "UserMoney",
  created() {
    let userToken = sessionStorage.getItem("userToken");
    if (userToken == null) {
      this.$router.push("newLogin");
    } else {
      this.userToken = userToken;
    }
    this.config = {
      headers: {
        'token': this.userToken
      }
    };
    this.loadData();
    this.refresh();
  },
  data() {
    return {
      // 当前页
      currentPage: 1,
      // 每页展示条数
      pageSize: 2,
      // 总条数
      total: 0,
      // 查询信息
      data: {
        userNo: sessionStorage.getItem("userNo"),
        startTime: "",
        endTime: ""
      },
      // 充值明细展示标识
      saveShowVisible: true,
      // 消费明细展示标识
      buyShowVisible: false,
      // 退款明细展示标识
      returnShowVisible: false,
      // 用户信息
      user: {
        userId: sessionStorage.getItem("userId"),
        userNo: sessionStorage.getItem("userNo"),
        userDiscount: sessionStorage.getItem("userDiscount"),
        userMoney: 0
      },
      // 用户充值明细集合
      userSaveList: [],
      // 用户消费明细集合
      userBuyList: [],
      // 用户退款明细集合
      userReturnList: [],
      // 充值金额
      saveMoney: null
    }
  },
  methods: {
    // 轮询数据
    refresh() {
      let timer = setInterval(function () {
        axios.post("/api/returnOrder/queryReturnOrderByIdAndGoodsName", {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          data: this.data
        }, this.config).then(response => {
          if (response.data.code === 200) {
            // this.saveMoney = null;
            this.loadData();
            this.changeCurrentPage();
            // clearInterval(timer);
          } else {
            ElMessage.error(response.data.msg);
          }
        });
      }.bind(this), 5000);
    },
    // 加载数据
    loadData() {
      axios.get('/api/userMoney/queryUserMoneyByNo?userNo=' + this.user.userNo, this.config).then(response => {
        if (response.data.code === 200) {
          this.user.userMoney = response.data.data.userMoney;
        } else {
          ElMessage.error(response.data.msg);
        }
      });
    },
    // 退出登录
    exitUser() {
      sessionStorage.clear();
      this.$router.push("newLogin")
    },
    // 查询预存款充值/消费明细
    queryMoney(tag) {
      if (tag === 1) {
        // 充值明细展示
        this.saveShowVisible = true;
        this.buyShowVisible = false;
        this.returnShowVisible = false;
        axios.post("/api/userMoneySave/queryUserMoneySaveByNo", {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          data: this.data
        }, this.config).then(response => {
          if (response.data.code === 200) {
            this.userSaveList = response.data.data.records;
            this.total = response.data.data.total;
          } else {
            ElMessage.error(response.data.msg);
          }
        });
      } else if (tag === 2) {
        // 消费明细展示
        this.saveShowVisible = false;
        this.buyShowVisible = true;
        this.returnShowVisible = false;
        axios.post("/api/userMoneyBuy/queryUserMoneyBuyByNo", {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          data: this.data
        }, this.config).then(response => {
          if (response.data.code === 200) {
            this.userBuyList = response.data.data.records;
            this.total = response.data.data.total;
          } else {
            ElMessage.error(response.data.msg);
          }
        });
      } else {
        // 退款明细展示
        this.saveShowVisible = false;
        this.buyShowVisible = false;
        this.returnShowVisible = true;
        axios.post("/api/userMoneyReturn/queryUserMoneyReturnByNo", {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          data: this.data
        }, this.config).then(response => {
          if (response.data.code === 200) {
            this.userReturnList = response.data.data.records;
            this.total = response.data.data.total;
          } else {
            ElMessage.error(response.data.msg);
          }
        });
      }
    },
    // 表格页面跳转
    changeCurrentPage() {
      // 展示对应的明细列表
      if (this.saveShowVisible) {
        this.queryMoney(1);
      }
      if (this.buyShowVisible) {
        this.queryMoney(2);
      }
      if (this.returnShowVisible) {
        this.queryMoney(3);
      }
    },
    // 重置查询条件
    reset() {
      this.$refs.data.resetFields();
      this.changeCurrentPage();
    },
    // 系统设定充值金额
    choseMoney(money) {
      this.saveMoney = money;
    },
    // 用户充值预存款
    userSaveMoney() {
      let time = this.getTime();
      if (this.saveMoney == null || this.saveMoney === "") {
        ElMessage.warning("充值金额不能为空");
        return;
      }
      // 用户发起充值请求
      window.open("/api/userMoney/alipay?userNo=" + this.user.userNo + "&money="
          + this.saveMoney + "&time=" + time);
      // 将充值信息发送给审核系统
      axios.get("/api/userMoney/sendUserMoney?userNo=" + this.user.userNo + "&money=" + this.saveMoney
          + "&time=" + time);
      this.saveMoney = null;
    },
    // 获取当前时间
    getTime() {
      let d = new Date();
      let year = d.getFullYear();
      let mon = d.getMonth() + 1;
      let day = d.getDate();
      let hour = d.getHours();
      let minute = d.getMinutes();
      let second = d.getSeconds();
      return year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day) + ' '
          + (hour < 10 ? ('0' + hour) : hour) + ':' + (minute < 10 ? ('0' + minute) : minute) + ':' + (second < 10 ? ('0' + second) : second);
    },
    toShoppingCar() {
      let str = sessionStorage.getItem("user")
      let user = JSON.parse(str)
      console.log(user)
      if (user.auditStatus === 1) {
        this.$router.push('shoppingCar')
      } else {
        ElMessage.error("用户资质还未通过")
      }
    },
    toOrder() {
      let str = sessionStorage.getItem("user")
      let user = JSON.parse(str)
      console.log(user)
      if (user.auditStatus === 1) {
        this.$router.push('order')
      } else {
        ElMessage.error("用户资质还未通过")
      }
    },

  }
}
</script>

<style>
#headDiv {
  width: 100%;
  background-color: white;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 5px 10px gray;
}
</style>